import React from 'react';
import Link from 'umi/link';
import router from 'umi/router';
import { toThousands } from '@/utils/util'
import style from './index.less';
import { connect } from 'react-redux';


class Transaction extends React.Component {
  constructor(props) {
    super(props);
    this.createClickHandler = this.createClickHandler.bind(this);
  }

  createClickHandler(hash) {
    return async(e)  => {
      e.preventDefault();
      await this.props.dispatch({
        type: 'global/fetch',
        payload: { value: hash }
      });
      const search = this.props.search;
      if (!search) return;
      if (search.prevHash || search.nextHash) {
        router.push(`/block/${search.hash}`);
      } else {
        router.push(`/transaction/${search.hash}`);
      }
    }
  }

  render() {
    const data = this.props.data;
    const parents = data && data.parentList ? data.parentList.map((parent, index) => {
      return (
        <div key={index} className={style.inner}>
          <span><Link to='#' onClick={this.createClickHandler(parent)}>{parent}</Link></span>
        </div>
      );
    }) : null;

    return (
      <div className={style.normal}>
        <div className={style.title}>
          <span>交易信息</span>
        </div>
        <div className={style.info}>
          <div className={style.left}>
            <div className={`${style['item-first']} ${style['item']}`}>
              <div>
                <span>所属区块高度</span>
              </div>
              <div>
                <span><Link to={`/block/${data.height}`}>{toThousands(data.height)}</Link></span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>交易类型</span>
              </div>
              <div>
                <span>{data.type}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>时间</span>
              </div>
              <div>
                <span>{data.outputTime}</span>
              </div>
            </div>
            {
              data.dataSize != null ?
                (
                  <div className={style.item}>
                    <div>
                      <span>数据大小</span>
                    </div>
                    <div>
                      <span>{data.dataSize} Bytes</span>
                    </div>
                  </div>
                ) : null
            }
            {
              data.propertyTypeName != null ?
                (
                  <div className={style.item}>
                    <div>
                      <span>资产类型</span>
                    </div>
                    <div>
                      <span>{data.propertyTypeName}</span>
                    </div>
                  </div>
                ) : null
            }
            {
              data.amount != null ?
                (
                  <div className={style.item}>
                    <div>
                      <span>数量</span>
                    </div>
                    <div>
                      <span>{data.amount}</span>
                    </div>
                  </div>
                ) : null
            }
            <div className={style.item}>
              <div>
                <span>出块者</span>
              </div>
              <div>
              <span>
                {
                  data.miner.address
                }
              </span>
              </div>
            </div>
            {
              data.miner.known ? (
                <div className={style.item}>
                  <div>
                    <span>出块来源</span>
                  </div>
                  <div>
                    <span><img src={data.miner.logoUrl} alt={data.miner.address} height='12px' width='12px'/>{' '+ data.miner.name}</span>
                  </div>
                </div>
              ) : null
            }
            <div className={style.item}>
              <div>
                <span>工作量证明nonce</span>
              </div>
              <div>
                <span>{data.mineNonce}</span>
              </div>
            </div>
          </div>
          <div className={style.right}>
            <div className={`${style['item-first']} ${style['item']}`}>
              <div>
                <span>交易签名</span>
              </div>
              <div>
                <span>{data.sign}</span>
              </div>
            </div>
            {
              data.from ? (
                <div className={style.item}>
                  <div>
                    <span>源地址</span>
                  </div>
                  <div>
                    <span>{data.from.address}</span>
                    {
                      data.from.known ?
                        <span>
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <img src={data.from.logoUrl} alt={data.from.address} height='10px' width='10px'/>
                          {' '+ data.from.name}
                        </span>
                        : ''
                    }
                  </div>
                </div>
              ) : null
            }
            {
              data.to ? (
                <div className={style.item}>
                  <div>
                    <span>目标地址</span>
                  </div>
                  <div>
                    <span>{data.to.address}{data.to.known ? <span><img src={data.to.logoUrl} alt={data.to.address} height='20px' width='20px'/>{' '+ data.to.name}</span> : ''}</span>
                  </div>
                </div>
              ) : null
            }
            <div className={style.item}>
              <div>
                <span>图父节点列表</span>
              </div>
              <div>
                {parents}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  const { data: search } = state.global;
  return {
    search
  };
}

export default connect(mapStateToProps)(Transaction);
